<template>
  <div class="login-container">
    <video autoplay muted loop class="background-video">
      <source src="/public/background1.mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    <div class="login-form">
      <h1>登录</h1>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" v-model="username" required />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="password" required />
        </div>
        <button type="submit">登录</button>
      </form>
      <div class="links">
        <router-link to="/register">注册</router-link>
        <router-link to="/forgot-password">忘记密码</router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import api from '@/api/login';
import { useTokenStore } from '@/stores/token';
const router = useRouter();

const username = ref('');
const password = ref('');

const handleLogin = async () => {
  console.log(`用户名: ${username.value}, 密码: ${password.value}`);
  const res = await api.login({
    username: username.value,
    password: password.value
  });
  console.log(res);
  if (res.code === 200) {
    const token = res.data.token;
    const userId = res.data.id;
    const username = res.data.username;
    const imageUrl ="/public/avatar.png"
    console.log(`token: ${token}, userId: ${userId}, username: ${username}`);
    useTokenStore().setToken(token, userId, username,imageUrl);
    localStorage.setItem('token', token);
    console.log('登录成功');

    router.push('/');
  } else {
    console.log('登录失败');
    alert('用户名或密码错误');
  }
};
</script>

<style scoped>
.login-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* 使视频在背景中 */
}

.login-form {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1; /* 确保表单在视频之上 */
}

.form-group {
  margin-bottom: 15px;
  margin-right: 20px;  
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.links {
  margin-top: 15px;
  text-align: center;
}

.links a {
  display: inline-block;
  margin: 0 10px;
  color: #007bff;
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}
</style> 